<template>
  <div class="wrapper">
    <!-- 主要内容 -->
    <el-main>
      <div class="container-fluid p-4">
        <div class="card border-0 shadow-sm mb-4">
          <div class="card-header bg-white">
            <h5 class="mb-0">我的消息</h5>
          </div>
          <div class="card-body">
            <el-card
              class="message-card"
              v-for="(message, index) in messages"
              :key="index"
            >
              <el-row
                class="list-group-item list-group-item-action d-flex gap-3 py-3"
              >
                <el-col :span="4">
                  <i :class="message.icon" class="fs-4"></i>
                </el-col>
                <el-col :span="16">
                  <h6 class="mb-0">{{ message.title }}</h6>
                  <p class="mb-0 opacity-75">{{ message.description }}</p>
                </el-col>
                <el-col :span="4" class="text-right">
                  <small class="opacity-50 text-nowrap">{{
                    message.time
                  }}</small>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>
<script>
import {
  ElAside,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElCard,
  ElRow,
  ElCol,
} from "element-plus";

export default {
  components: {
    ElAside,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElCard,
    ElRow,
    ElCol,
  },
  data() {
    return {
      messages: [
        {
          icon: "bi bi-chat-dots text-primary",
          title: "您的帖子“关于护理伦理的探讨”有了新回复",
          description:
            "用户 [张三] 回复了您的帖子：“我觉得护理伦理在实际操作中非常重要...”",
          time: "3分钟前",
        },
        {
          icon: "bi bi-calendar-x text-danger",
          title: "课程《静脉输液技术进阶》作业即将截止",
          description:
            "请注意，您的《静脉输液技术进阶》课程作业将于明天（2023-10-27）23:59截止，请尽快提交。",
          time: "1小时前",
        },
        {
          icon: "bi bi-bell text-warning",
          title: "《急救护理实操要点》课程考试提醒",
          description:
            "您报名的《急救护理实操要点》课程考试将于2023-11-01 09:00开始，请提前做好准备。",
          time: "1天前",
        },
        {
          icon: "bi bi-book text-success",
          title: "新课程《伤口护理与换药技术》已上线",
          description: "一门关于伤口护理的全新课程已发布，点击查看详情。",
          time: "2天前",
        },
      ],
    };
  },
};
</script>

<style scoped>
.wrapper {
  display: flex;
}

.card-header {
  background-color: #fff;
}

.message-card {
  margin-bottom: 10px;
}

.fs-4 {
  font-size: 1.5rem;
}
</style>
